<template>
  <div class="headUserTabs">
    <div v-for="cell in cells" :key="cell.id">
      <p class="title">{{ cell.title }}</p>
      <div class="item-t">
        <div
          v-for="item in cell.list"
          :key="item.id"
          class="item"
          v-click-move
          @click="handleClick(item)"
        >
          <div class="left">
            <NuxtImg :src="item.icon" />
            <p>{{ item.title }}</p>
          </div>
          <div class="rit">
            <NuxtImg src="/images/layout/icon-jtRight.png" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("user");

const cells = ref([
  {
    id: 1,
    title: lang.pagar,
    list: [
      {
        id: 1,
        title: lang.pagar_1,
        icon: "/images/user/headUser_1.png",
      },
      {
        id: 2,
        title: lang.pagar_2,
        icon: "/images/user/headUser_2.png",
      },
      {
        id: 3,
        title: lang.pagar_3,
        icon: "/images/user/headUser_3.png",
      },
      {
        id: 4,
        title: lang.pagar_4,
        icon: "/images/user/headUser_4.png",
      },
    ],
  },
  {
    id: 2,
    title: lang.outros,
    list: [
      {
        id: 1,
        title: lang.outros_1,
        icon: "/images/user/headUser_6.png",
        routeName: "static-setting",
      },
      {
        id: 2,
        title: lang.outros_2,
        icon: "/images/user/headUser_5.png",
        routeName: "static-customer",
      },
      {
        id: 3,
        title: lang.outros_3,
        icon: "/images/user/headUser_7.png",
        isLoginout: true,
      },
    ],
  },
]);

const userStore = useUserStore();
async function handleClick(item: any) {
  // 路由跳转
  if (item.routeName) {
    navigateTo({ name: item.routeName });
    return;
  }
  // 退出登录
  if (item.isLoginout) {
    navigateTo({ name: "home" });
    userStore.changeShowUser(false);
    setTimeout(() => {
      userStore.changeIsLogin(false);
    }, 300);
    return;
  }

  // 其他
  showNotify({
    type: "success",
    message: `此处可前往活动页`,
  });
}
</script>

<style scoped lang="scss">
.headUserTabs {
  width: 100%;
  margin: 0.29rem 0 3rem;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.13rem;
}
.headUserTabs .title {
  font-weight: 700;
  font-size: 0.4rem;
  color: #fff;
  margin-bottom: 0.2rem;
}
.headUserTabs .item-t .item {
  margin-bottom: 0.2rem;
}
.headUserTabs .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #312734;
  box-sizing: border-box;
  height: 1.3rem;
  width: 100%;
  padding: 0.2rem 0.3rem;
  border-radius: 0.15rem;
  color: var(--theme-neutral1);
  position: relative;
}
.headUserTabs .item .left {
  display: flex;
  align-items: center;
}
.headUserTabs .item .left img {
  width: 0.52rem;
}
.headUserTabs .item .left p {
  margin-left: 0.32rem;
  font-size: 0.4rem;
  font-weight: 300 !important;
  color: var(--theme-neutral1);
}
.headUserTabs .item .rit img {
  width: 0.4rem;
  opacity: 0.5;
}
</style>
